<template>
	<div class="geshou" style="padding: 0 10px;">

		
		<section >
			<ul class="singer_head">
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="160" height="76"/>
				</router-link>
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="160" height="76"/>
				</router-link>
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="160" height="76"/>
				</router-link>
				<router-link to="#" tag="li">
					<img src="../../build/logo.png" width="160" height="76"/>
				</router-link>
			</ul>
			
			<div class="singer_list">
				<h5 style="margin: 5px 0;">推荐歌手</h5>
				<!--<van-cell title="单元格" is-link to="#" size="large" label="描述信息" ></van-cell>-->
				<ul>
					<router-link to="#" tag="li">
						<img src="../../build/logo.png" width="53" height="53"/>
						<span>
							<p>周杰伦</p>
							<p style="color: #A8A8A8;font-size:12px;">粉丝：60万</p>
							<em>&gt;</em>
						</span>
					</router-link>
				</ul>
			</div>
			
		</section>
		

		
	</div>
	
</template>

<script>
	import { NavBar ,NoticeBar,Cell, CellGroup} from 'vant'
	export default{
		name:"Singer",
		components:{
			[NavBar.name]:NavBar,
			[NoticeBar.name]:NoticeBar,
			[Cell.name]:Cell,
			[CellGroup.name]:CellGroup,
		},
		data(){
			return{
				src:'',
				
			};
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1);
			},
			
		},
		
	}
</script>

<style>

.singer_head{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.singer_head li{
	padding: 5px 0;
}
.singer_list ul li{
	display: flex;
	position: relative;
	margin: 12px 0;
}
.singer_list ul li>img{
	border-radius: 50%;
	margin-right: 11px;
}
.singer_list li>span>p{
	margin: 5px 0;
	font-size: 14px;
}
.singer_list li>span>em{
	position: absolute;
	right: 5px;
	top: 0;
	font-size: 30px;
	font-style: normal;
	color: #a8a8a8;
}


</style>